<template>
  <div class="tags-wrapper">
    <div class="tags" :style="styleVal">
      <template v-for="(item, index) in data">
        <div
          v-if="item instanceof Object"
          :key="item[valueKey]"
          :class="{
            'tags-item': true,
            'is-active': modelValue === item[valueKey],
            'fill-tab': fill,
            disabled: item[disabledKey]
          }"
          @click="handleClick(item[valueKey], item, index)"
        >
          <slot v-if="item.slot" :name="item.slot" v-bind="{ row: item, index }"></slot>
          <template v-else>
            <span class="tags-item-text">{{ item[labelKey] }}</span>
            <span v-if="numberKey in item" class="tags-item-count">({{ item[numberKey] }})</span>
          </template>
          <ribbon v-if="item.ribbonValue" :ribbonStyle="item.ribbonStyle">{{
            item.ribbonValue
          }}</ribbon>
        </div>
        <div
          v-else
          :key="index"
          :class="{ 'tags-item': true, 'is-active': modelValue === index }"
          @click="handleClick(index, item, index)"
        >
          {{ item }}
        </div>
      </template>
    </div>
    <div class="extra">
      <slot></slot>
    </div>
  </div>
</template>
<script setup>
import ribbon from './ribbon.vue'
import { computed } from 'vue'
const emits = defineEmits(['update:modelValue', 'change'])
const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  modelValue: [String, Number],
  valueKey: {
    type: String,
    default: 'value'
  },
  labelKey: {
    type: String,
    default: 'label'
  },
  disabledKey: {
    type: String,
    default: 'disabled'
  },
  numberKey: {
    type: String,
    default: 'number'
  },
  fill: {
    type: Boolean,
    default: false
  },
  height: {
    type: [String, Number],
    default: ''
  }
})
const handleClick = (key, item, index) => {
  if (item[props.disabledKey]) {
    return
  }
  if (key !== props.modelValue) {
    emits('update:modelValue', key)
    emits('change', key, item, index)
  }
}
const styleVal = computed(() => {
  if (!props.height) {
    return
  }
  if (typeof props.height === 'number') {
    return `height:${props.height}px`
  } else {
    return `height:${props.height}`
  }
})
</script>
<style scoped>
.tags-wrapper {
  position: relative;
}
.tags-wrapper > .extra {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
}
.disabled {
  cursor: not-allowed !important;
  opacity: 0.4 !important;
  filter: grayscale(1) !important;
}
.tags {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  height: 40px;
}

.tags-item {
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 2px solid transparent;
  color: var(--text-common, #333);
  font-size: 14px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: 0.6s;
}
.fill-tab {
  flex-grow: 1;
}
.tags-item.is-active {
  color: var(--tabs-active-text, #409eff);
  font-weight: bold;
}
.tags-item.is-active {
  border-bottom-color: var(--border-primary, #409eff);
  font-weight: bold;
}
.tags-item-count {
  margin-left: 5px;
}
</style>
